<template>
  <div class="bg-w biz-process-block">
    <div class="biz-process">
      <div
        class="biz-process-state"
        v-for="(item, index) in stateList"
        :key="index"
        :class="{
          'biz-process-state-first': index == 0,
          'biz-process-state-before': item.state < state,
          'biz-process-state-current': item.state == state,
          'biz-process-state-after': item.state > state,
          'biz-process-state-last': index == stateList.length - 1,
        }"
      >
        <span class="biz-process-left-triangle"
          ><span class="biz-process-left-triangle-top"></span
          ><span class="biz-process-left-triangle-bottom"></span
        ></span>
        <span class="biz-process-state-name">{{ item.text }}</span>
        <span class="biz-process-right-triangle"></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'order-state',
  props: {
    state: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  computed: {
    stateList() {
      if (this.state == 5) {
        return [
          {
            state: 1,
            text: this.$t('order.detailV2.toBePaid'),
          },
          {
            state: 5,
            text: this.$t('common.task.type.offed'),
          },
        ];
      } else {
        return [
          {
            state: 1,
            text: this.$t('order.detailV2.toBePaid'),
          },
          {
            state: 2,
            text: this.$t('order.detailV2.toBeShipped'),
          },
          {
            state: 3,
            text: this.$t('common.base.usualStatus.delivered'),
          },
          {
            state: 4,
            text: this.$t('common.base.usualStatus.finish'),
          },
        ];
      }
    },
  },
  methods: {},
};
</script>

<style lang="scss">
@import '@src/component/business/BizProcess/BizProcess.scss';
</style>